<template>
    <div>
        <!-- <van-nav-bar :title="title" left-text="返回" left-arrow @click-left="onClickLeft" /> -->
        <div class="flex justify-center">
            <div class="w-full flex flex-col">
                <!-- 轮播图 -->
                <van-swipe :autoplay="3000" lazy-render indicator-color="white">
                    <van-swipe-item v-for="image in swiperList" :key="image">
                        <img :src="image.thumb" />
                    </van-swipe-item>
                </van-swipe>
                <!--商品标题 + 产品编码 -->
                <div class="bg-white p-4">
                    <van-space direction="vertical" fill>
                        <div class="text-sm font-bold product-title">{{ product.title }}</div>
                        <div class="text-gray-400 product-spu">产品编码：{{ product.spu }}</div>
                    </van-space>
                </div>
                <!-- 商品详情 -->
                <div class="bg-white p-4 mt-1">
                    <van-space direction="vertical" fill>
                        <div class="text-sm font-bold product-detail">商品详情</div>
                        <!--图片-->
                        <view v-for="(item, index) in detailList" :key="item.pId" style="width:100%">
                            <div class="detail-img" v-if="item.content.type == 'image'">
                                <van-image v-for="(img, index1) in item.content.thumbList" style="width:100%"
                                    :key="img.pId" :src="img.url" mode="widthFix" />
                            </div>
                            <!-- else-->
                            <div class="text-gray-400" v-else>
                                <text>{{ item.content.content | raw }}</text>
                            </div>
                        </view>
                    </van-space>
                </div>
                <!-- 固定在底部的兑换按钮 -->
                <div class="fixed bottom-0 w-full p-2 bg-white">
                    <!-- <template v-if="!giftProductDetail.exchange"> -->
                        <van-button type="danger" class="goButton" size="large" round block @click="goExchange">兑换</van-button>
                    <!-- </template> -->
                    <!-- <template v-else> -->
                        <!-- <van-button type="danger" size="large" round block disabled>已兑换</van-button> -->
                    <!-- </template> -->
                    <!-- <van-button type="danger" round block @click="goExchange" :disabled="!product.isExchange" >去兑换</van-button> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="GiftDetail">
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted } from 'vue';
const $router = useRouter();
import { showToast } from 'vant';

import { CommonApi } from '@/api/CommonApi';

// 详情图
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

// 返回 
const onClickLeft = () => {
    history.back();
}

// 
const title = '兑换详情';


// 产品详情
const giftProductDetail = ref({});

// 产品
const product = ref({});

// 轮播图 swiperList
const swiperList = ref([]);

// 产品详情list
const detailList = ref([]);

// 获取url参数
const route = useRoute();
const urlParams = route.query; // 获取URL的参数
// 获取url中的参数id
const giftProdId = ref(urlParams.giftProdId);

// onMounted
onMounted(() => {
    CommonApi.getGiftProductDetail({ giftProdId: giftProdId.value })
        .then(response => {
            giftProductDetail.value = response.data;
            product.value = response.data.product;
            swiperList.value = response.data.product.swiperList;
            detailList.value = response.data.product.detailList;
        }).finally(() => {
            console.log('finally');
        });
});


// 去兑换
const goExchange = () => {

    // 判断是否已经兑换 如果已经兑换 提示 您已经兑换，可在订单中查看兑换详情
    if (giftProductDetail.value.exchange) {
        // console.log('您已经兑换，可在订单中查看兑换详情');
        showToast({ message: '您已经兑换，可在订单中查看兑换详情' , wordBreak: 'break-all'});
        return;
    }

    console.log('去兑换');
    $router.push({ path: '/exchange', query: { giftProdId: giftProdId.value } });
}

</script>

<style lang="less">
body {
    background: #f5f5f5;
}

.goButton {
    padding-top: 0.6vw !important;
    padding-bottom: 0.6vw !important;
    background: #b00d0d !important;
}

.product-title {
    font-size: 1.1rem;
}

.product-spu {
    font-size: 0.8rem;
}

.product-detail {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

</style>